<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useLangStore } from '@/stores/lang'
import { useRouter } from 'vue-router'

const router = useRouter()

let langStore = useLangStore()

let { lang } = storeToRefs(langStore)
// const emit = defineEmits(['changeLang'])

const toChangeLang = (langid, name) => {
    // 切换语言
    // emit('changeLang', langnum)
    langStore.changeLang(langid)
    // 切换路由
    let path = router.currentRoute.value.path
    let query = router.currentRoute.value.query
    if (path.includes(`/${name}`)) return
    // 判断当前路由是否包含cn或en
    if (path.includes('/cn') || path.includes('/en')) {
        // 判断当前路由是否包含cn或en
        if (path.includes('/cn')) {
            path = path.replace('/cn', `/${name}`)
        } else if (path.includes('/en')) {
            path = path.replace('/en', `/${name}`)
        }
    }
    router.replace({ path, query })
}
</script>

<template>
    <div class="langbox">
        <!-- <button type="button" :class="['btn btn_lang', item.active ? 'active' : '']" v-for="item in lang"
            :key="item.name" @click="toChangeLang(item.lang, item.name)">{{ item.value }}</button> -->
        <button type="button" class="btn btn_lang"><span :class="[lang[0].active ? 'active' : '']"
                @click="toChangeLang('zh_cn', 'cn')">中文</span> / <span :class="[lang[1].active ? 'active' : '']"
                @click="toChangeLang('en', 'en')">EN</span></button>
    </div>
</template>

<style lang="scss" scoped>
.langbox {
    position: absolute;
    top: 3.54vw;
    left: 6.25vw;
    z-index: 9;
    .btn_lang {
        cursor: pointer;
        font-size: 1.085vw;
        padding: 0.37vw 1.2vw;
        color: #ffffff;
        .active {
            color: #33c5b8;
        }
    }
}
</style>